<template>
  <div class="wrap">
    <!-- 查看详情弹框 -->
    <el-dialog
      :title="title + '用户'"
      :visible.sync="addUserShow"
      width="400px"
      :before-close="handleCloses"
      append-to-body
      :close-on-click-modal="false"
    >
      <!-- <p class="shopList"></p> -->
      <div class="sousuojg6_10">
        <el-form :inline="true" :model="formInline" class="demo-form-inline">
          <el-col>
            <el-form-item label-width="80px" label="用户类型">
              <el-select
              class="userTypeBox"
                v-model="formInline.userType"
                :disabled="title == '编辑'"
                clearable
                placeholder="请选择"
              >
                <!-- <el-option label="系统管理员" value="1"></el-option>  -->
                <el-option label="普通用户" value="1"></el-option>
              </el-select> </el-form-item
          ></el-col>
          <el-col>
            <el-form-item label-width="80px" label="用户姓名">
              <el-input
                v-model="formInline.name"
                class="userTypeBox"
                placeholder="请输入用户姓名"
              ></el-input> </el-form-item
          ></el-col>
          <el-col>
            <el-form-item label-width="80px" label="邮箱">
              <el-input
              class="userTypeBox"
                v-model="formInline.email"
                placeholder="请输入邮箱"
              ></el-input> </el-form-item
          ></el-col>
          <el-col>
            <el-form-item label-width="80px" label="手机号">
              <el-input
              class="userTypeBox"
                v-model="formInline.phone"
                placeholder="请输入手机号"
              ></el-input> </el-form-item
          ></el-col>
          <el-col>
            <el-form-item
              label-width="80px"
              label="归属机构"
              v-if="title == '编辑'"
            >
              <el-input
              class="userTypeBox"
                v-model="formInline.officeUid"
                disabled
                placeholder="请输入归属机构"
              ></el-input> </el-form-item
          ></el-col>
          <!-- <br v-if='title == "编辑"'> -->
          <el-col>
            <el-form-item
              label-width="80px"
              label="登录账户"
              v-if="title == '编辑'"
            >
              <el-input
              class="userTypeBox"
                v-model="formInline.phone"
                disabled
                placeholder="请输入登录账户"
              ></el-input> </el-form-item
          ></el-col>
          <!-- <br v-if='title == "编辑"'> -->
          <el-col>
            <el-form-item
              label-width="80px"
              label="工号"
              v-if="title == '编辑'"
            >
              <el-input
              class="userTypeBox"
                v-model="formInline.no"
                placeholder="请输入工号"
              ></el-input> </el-form-item
          ></el-col>
          <!-- <el-form-item label-width="80px" label="用户头像">
            <el-upload
              :action="GLOBAL.httpurl + '/api/fileUpload'"
              name='file'
              :file-list="imgData"
              :limit='1'
              list-type="picture-card"
              accept=".jpg,.png,.JPG,.PNG,.jepg,JEPG"
              :before-upload="beforeUpload"
              :on-success='handleSuccess'
              :on-preview="handlePictureCardPreview"
              :on-remove="handleRemove">
              <i class="el-icon-plus"></i>
            </el-upload>
            <el-dialog :visible.sync="dialogVisible" append-to-body>
              <img width="100%" :src="dialogImageUrl" alt="">
            </el-dialog>
          </el-form-item> -->
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="handleCloses">取 消</el-button>
        <el-button type="primary" @click="userSave">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import bus from "../../assets/js/bus";
import https from "../../plugins/https";
import qs from "qs";
export default {
  props: {
    addUserShow: {
      type: Boolean,
      default() {
        return false;
      }
    },
    addUserType: {
      type: Number
    },
    addUserId: {
      type: Number
    }
  },
  data() {
    return {
      formInline: {
        oemUid:
          localStorage.getItem("jurisdiction") == 0
            ? localStorage.getItem("uid")
            : "",
        officeUid: localStorage.getItem("uid"),
        userType: "",
        name: "",
        email: "",
        phone: ""
      },
      imgData: [],
      totalNum: 0, //总页数
      tableData: [],
      listLoading: false,
      rechargePhoto: "",
      dialogImageUrl: "",
      dialogVisible: false,
      title: ""
    };
  },
  watch: {
    addUserShow(n) {
      if (n === true) {
        this.title = this.addUserType == 1 ? "添加" : "编辑";
        this.addUserType == 2 && this.queryProductInfo();
      }
    }
  },
  mounted() {
    // console.log(555, this.eventShow)
  },
  methods: {
    userSave() {
      console.log(this.formInline);
      if (this.formInline.userType == "") {
        layer.open({
          content: "请输入用户类型",
          skin: "msg",
          time:  2 //1秒后自动关闭
        });
        return false;
      }
      // this.$notify({title: "错误",message: ,type: "error"});
      else if (this.formInline.name == "") {
        layer.open({
          content: "请输入用户姓名",
          skin: "msg",
          time:  2 //1秒后自动关闭
        });
        return false;
      }
      // this.$notify({title: "错误",message: ,type: "error"});
      else if (this.formInline.email == "") {
        layer.open({
          content: "请输入邮箱",
          skin: "msg",
          time:  2 //1秒后自动关闭
        });
        return false;
      }
      // this.$notify({title: "错误",message: ,type: "error"});
      else if (this.formInline.phone == "") {
        layer.open({
          content: "请输入手机号",
          skin: "msg",
          time:  2 //1秒后自动关闭
        });
        return false;
      }
      // this.$notify({title: "错误",message: ,type: "error"});
      else if (!/^1[3|4|5|7|8|9][0-9]\d{4,8}$/.test(this.formInline.phone)) {
        layer.open({
          content: "手机号码有误，请重填",
          skin: "msg",
          time:  2 //1秒后自动关闭
        });
      }
      // this.$notify({title: "错误",message: ,type: "error"});
      else if (
        !/^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/.test(
          this.formInline.email
        )
      ) {
        layer.open({
          content: "邮箱有误，请重填",
          skin: "msg",
          time:  2 //1秒后自动关闭
        });
        return false;
      }
      else {
        this.formInline.officeUid = localStorage.getItem("uid");
        console.log(this.formInline);
        https.userSave(this.formInline).then(res => {
          if (res.data.code !== "0000") {
            layer.open({
              content: res.data.msg,
              skin: "msg",
              time:  2 //1秒后自动关闭
            });
            // this.$notify({title: "错误",message: res.data.msg,type: "error"});
            this.listLoading = false;
            return;
          }
          layer.open({
            content: res.data.msg,
            skin: "msg",
            time:  2 //1秒后自动关闭
          });
          // this.$notify({title: "成功",message: res.data.msg,type: "success"});
          bus.$emit("addUserSuccess", { type: 1, show: false });
          this.formInline = {
            userType: "",
            name: "",
            email: "",
            phone: ""
          };
          this.listLoading = false;
        });
      }
    },
    queryProductInfo() {
      console.log(33, this.addUserId);
      this.listLoading = true;
      https.queryUpdateUser({ userId: this.addUserId }).then(res => {
        if (res.data.code !== "0000") {
          layer.open({
            content: res.data.msg,
            skin: "msg",
            time:  2 //1秒后自动关闭
          });
          // this.$notify({title: "错误",message: res.data.msg,type: "error"});
          this.listLoading = false;
          return;
        }
        console.log(666, res);
        this.formInline = res.data.data;
        this.listLoading = false;
      });
    },
    handleCloses(done) {
      bus.$emit("addUserSuccess", { type: 2, show: false });
      this.formInline = {
        userType: "",
        name: "",
        email: "",
        phone: ""
      };
    },
    beforeUpload(file) {
      let islt1M = file.size / 1024 / 1024 < 1000;
      if (!islt1M) {
        layer.open({
          content: "上传图片大小不能超过1M",
          skin: "msg",
          time:  2 //1秒后自动关闭
        });
        // this.$notify({title: "错误",message: ,type: "error"});
        return false;
      }
    },
    handleRemove(file, fileList) {
      console.log(file, fileList);
      this.rechargePhoto = "";
      this.imgData = [];
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
      // rechargePhoto
    },
    handleSuccess(res, file, fileList) {
      console.log(33, res, file, fileList);
      this.rechargePhoto = res.data.filePath;
      this.imgData = fileList;
    }
  }
};
</script>
<style scoped>
.btnExport {
  float: left;
  margin-top: 10px;
  margin-bottom: 10px;
}
.pagination {
  margin-top: 10px;
}
.sousuojg6_10 {
  width: 100%; 
  /* float: left; */
  font-size: 16px;
  color: #222;
  box-sizing: border-box;
  background-color: #f6f6f6;
  border-radius: 5px;
}
.shopList {
  width: 100%;
  border-bottom: 1px solid #ccc;
  line-height: 50px;
  font-size: 16px;
  height: 30px;
  margin-bottom: 30px;
}
.wrap {
  height: 600px;
}
/deep/ .el-form-item__label {
  text-align: left !important;
}
/deep/ .userTypeBox .el-input{
  width: 260px;
}
/deep/ .userTypeBox .el-input__inner{
  width: 260px;
}

</style>
